import React,{Component} from 'react'
import MenuConfig from '../utils/MenuConfig.js'
import { Menu, Icon } from 'antd';
const SubMenu = Menu.SubMenu;

export default class demo extends Component{
    rootSubmenuKeys=[]
    state = {
        openKeys: [],
        selectedKeys: [],
    };
    // 点击时切换展开项
    onOpenChange = (openKeys) => {
        const latestOpenKey = openKeys.find(key =>
            this.state.openKeys.indexOf(key) === -1
        );
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } else {
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
    }
    componentWillMount(){
        const menuTreeNode = this.renderMenu(MenuConfig);
        this.setState({
            menuTreeNode:menuTreeNode,
            openKeys:['/ui'],
            selectedKeys:['/admin/home']

        })
    }
    // 左边导航栏渲染（原理，通过递归的方式进行渲染）
    renderMenu = (data)=>{
        return data.map((item)=>{
            if(item.children){//当有子集存在的时候，需要再次调用遍历
                this.rootSubmenuKeys.push(item.key)
                return (
                    <SubMenu title={item.title} key={item.key}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }
            return (
                <Menu.Item title={item.title} key={item.key}>{item.title}</Menu.Item>
            )
        })
    }
    render(){
        return(
            <div>
                <Menu
                    theme='dark'
                    mode="inline"
                    openKeys={this.state.openKeys}
                    selectedKeys={this.state.selectedKeys}
                    onOpenChange={this.onOpenChange}
                >
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}
